情境

今天我們來討論一個常見的設計，標題與圖示。
下面這是一張很常見的卡片式設計，看起來很正常不是嗎？

我們在生活當中很常遇到類似這樣的設計，就是在一個卡片式的排版當中，標題與圖示呈現水平排列，分別放在卡片的左右兩側，舉幾個例子：

在 Youtube 當中也有：

在 Facebook 上面也有：

codepen 上面的卡片：

你能看見多遠的未來呢？

總而言之，這樣的設計到處都是，甚至在工作場合中，設計師給的設計稿上面應該也很容易出現這樣的設計。

可是魔鬼總是藏在細節裡。你在第一眼看到這種設計的時候，你在多短的時間內有辦法想到這個問題「如果標題太長可能會發生什麼事？」

除了這個問題以外，你是否還能考慮到其他有可能會發生的狀況呢？

標題太長而碰到圖示

下面這個是標題太長而碰到圖示的範例，有沒有發現，標題跟圖示太靠近而貼在一起了。

所以，聰明的你，記得可以在標題跟圖示之間加上間距，例如：

.title {
  margin-right: 1rem;
}

[經驗分享]
除非是經驗豐富的設計師，他會在他的設計稿上面考慮到這個狀況，而展示各種不同標題長度的應對方式。

否則，今天設計師他沒有考慮到，然後設計稿交到前端工程師手上，剛好你是一個熱血沸騰的新手，你一看，覺得沒有什麼問題，就開工了。

運氣好一點的話，你在開發時，做了一些響應式的調整，突然你發現這個狀況會有問題，然後跑去跟設計師討論。但運氣差一點，有可能大家都沒發現，就直接讓產品上線了。等到使用者在使用時才突然發現畫面怪怪的。

上線後才發現有問題的狀況是很有可能會發生的，例如系統設計一個留言板，讓使用者填寫標題和內容，因為我們事先沒有考慮到使用者可能會塞了一堆資訊在標題，畢竟我們自己在測試的時候漏掉了這些極端的測試，開發者通常都是乖乖牌使用者。所以等到產品一上線，被使用者不經意的超出你預期的使用，問題才會浮現出來。

標題與圖示的對齊

我們再看遠一點，假設我們處理標題太長的方式不是用「點點點」來省略他，而是用換行來處理，你覺得有可能會發生什麼狀況呢？

我們實際上來試試看，我故意讓他換到三行比較明顯：

在這裡的狀況是，當標題與圖示只考慮一行呈現時，我們會很直覺的讓他「上下置中對齊」。

可是今天標題需要換行時，標題與圖示用上下置中對齊來處理，是否是我們期待的效果呢？以我的經驗來說，往往不是。

通常會希望他置頂。但這裡困難來了，如果我們希望不換行時能夠置中，換行時能夠置頂，這樣做起來確實會比較複雜。

但如果字體的行高(line-height)與圖示差不多大小，這樣來做置頂，就能夠達到「不換行時看起來是置中，換行時看起來是置頂」的效果：

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; // 置頂
  line-height: 24px; // 調整行高
}

.title {
  font-size: 24px;
  font-weight: 900;
}

<div class="header">
  <div class="title">{props.title}</div>
  <div class="icon">
    <img src="https://cdn-icons-png.flaticon.com/512/1242/1242392.png" width="24" height="24" alt="" />
  </div>
</div>

[聊天時間]
「希望不換行時能夠置中，換行時能夠置頂」
當工程師聽到這句話時，想到「難道你要我寫一個 javascript 一直不斷去監聽標題長度寬度，藉此來判斷有沒有換行，而你要我搞這麼複雜就只是為了叫我對齊標題跟圖示嗎？」很可能會暴怒。

或者，很有可能有設計師會進一步激怒工程師，說「我以前配合的工程師都很容易可以做到，你為什麼做不到？這個應該不難」，聽到這句話的工程師絕對會火山爆發。

工程師在跟設計師或 PM 配合時，一方面是在磨練自己的技術，另一方面也是在磨練自己的耐性，工程師真的不要輕易被設計師或 PM 激怒，畢竟他們不懂實做，只能用自己腦補的方式給你一些意見，希望能夠趕快解決問題。

這時，不管別人說什麼，你只需要知道「他們希望能夠達到那個效果」這樣就可以了。
至於他們非技術人員講的一些技術建議，甚至要技術指導你，在你聽起來卻覺得很荒謬時，你千萬不要跟他們一般見識啊！記住！你只需要釐清需求就可以了！其他的，就是保持理性，然後，來看我的文章，哈哈哈。

直接限制使用者的輸入

另一方面，也有一種預防勝於治療的方法，以先前提到「留言板」那個例子來說，我們可以直接限制使用者輸入的字數，用來避免標題過長而需要處理極端值情況的發生。

<input type="text" name="title" maxlength="25">

小結

今天我們討論到「標題與圖示」放在同一行的設計時，需要考慮的狀況

• 如果標題太長而碰到圖示了，記得可以給他加上間距，以免標題與圖示貼在一起。
• 如果標題太長而用換行來處理，那我們要留意標題與圖示的上下對齊是否符合預期。
• 直接限制使用者能夠輸入的標題長度，藉此避免標題太長而破版。

當然，標題太長時也很有可能在尾部用「點點點」來處理，讓他永遠保持是一行，那我們就回到第一點的提醒，點點點的地方記得留意會不會靠圖示太近囉！